<template>
    <div>
        <el-statistic :value="outputValue" :value-style="{ ...valueStyle, fontWeight: 'bold' }" :formatter="formatter">
            <template #suffix>
                <div :style="{ color: '#fff', ...suffixStyle }">
                    {{ suffix }}
                </div>
            </template>
            <template #prefix>
                <div :style="{ color: '#fff', ...prefixStyle, textAlign: '' }">
                    {{ prefix }}
                </div>
            </template>
        </el-statistic>
    </div>
</template>

<script setup>
import { ref, defineProps, watch, onMounted } from 'vue';
import { useTransition } from '@vueuse/core';

const props = defineProps({
    value: {
        type: Number,
        default: 0
    },
    valueStyle: Object,
    suffix: String,
    suffixStyle: Object,
    isToFixed: {
        type: Boolean,
        default: true,
    },
    prefix: String,
    prefixStyle: Object,
});

const source = ref(0); // 初始直接赋值

const outputValue = useTransition(source, {
    duration: 1500,
});

// 监听 props.value 变化，更新 source.value
watch(
    () => props.value,
    (newVal) => {
        setTimeout(() => {
            console.log(newVal);
            source.value = parseFloat(newVal);
        }, 1000)
    }
);
onMounted(() => {
    source.value = parseFloat(props.value);
});

const formatter = (number) => {
    return props.isToFixed ? number.toFixed(2) : number.toFixed(0);
};
</script>

<style scoped>
:deep(.el-statistic__content) {}
</style>